<template>
  <div class="all">
    <div class="shenqing">
      <div class="shenqingtitle">成为站酷学习老师</div>
      <div class="tips">
        站酷诚邀优秀讲师/机构入驻，请您填写表单，我们将与您沟通合作细节（带*的为必填项）
      </div>
    </div>
    <div class="shenqingziliao">
      <div class="shenqingcontent">
        <div style="margin-left: auto" direction="row" class="classzhuti">
          <div class="tip">
            开课主体
            <span>*</span>
          </div>
          <div class="typelist">
            <div
              class="typebutton"
              v-for="(value, index) in list"
              @click="changeBackgroundColor(index)"
              :style="{ backgroundColor: isActive(index) ? 'yellow' : 'white' }"
              v-bind:key="index"
            >
              {{ value }}
            </div>
          </div>
        </div>
      </div>
      <div class="shenqingcontent">
        <div class="tip">讲师站酷主页/作品链接</div>
        <input
          type="text"
          placeholder="https://"
          class="lianjie"
          v-model="lianjie"
        />
      </div>
      <div class="shenqingcontent">
        <div class="tip">
          课程主题 / 方向 / 信息
          <span>*</span>
        </div>
        <textarea
          cols="30"
          rows="10"
          placeholder="如：我擅长三维类创作，有一年讲师经验，曾在xxx单位任职"
          v-model="Content"
        ></textarea>
      </div>
      <div class="shenqingcontent">
        <div class="tip">
          联系方式
          <span>*</span>
        </div>
        <input
          type="text"
          placeholder="请输入手机号/微信/邮箱等有效信息"
          class="lianxi"
          v-model="Information"
        />
      </div>
      <button @click="tijiao()">提交</button>
    </div>
    <div class="email">联系我们：2998810102@qq.com</div>
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
import axios from "axios";
export default {
  data() {
    return {
      list: ["个人", "机构"],
      backgroundColor: "white",
      activeIndex: -1,
      lianjie: "",
      Content: "",
      Information: "",
    }; //数据源（包含双向绑定数据获取值）
  },
  methods: {
    changeBackgroundColor(index) {
      this.activeIndex = index;
    }, //获取v-for中用户点击的下标
    isActive(index) {
      return index === this.activeIndex;
    }, //检查传入的索引（index）是否与当前实例的 activeIndex 属性值相等
    tijiao() {
      var coursetpye = this.list[this.activeIndex]; //将用户选中list中的数据拿出来存在coursetpye中
      if (this.activeIndex === -1) {
        //判断用户有没有点击v-for中的模块获取list值
        alert("请选择主体");
        console.log("没有选择主体");
        return;
      }
      if (this.lianjie == /^(?!https:\/\/).*$/ || this.lianjie !== "") {
        alert("请输入正确的地址");
        return;
      }
      if (this.Content == "") {
        //判断用户有没有填写主题
        alert("请填写课程主题");
        return;
      }
      if (this.Information == "") {
        //判断用户有没有填写联系方式
        alert("请填写联系方式");
        return;
      } else {
        axios //发起网络请求，成功后还原数据源数据
          .post("/egg/teacher", {
            coursetpye: coursetpye,
            lianjie: this.lianjie,
            Content: this.Content,
            Information: this.Information,
          })
          .then((response) => {
            console.log(response);
            (this.backgroundColor = "white"),
              (this.activeIndex = -1),
              (this.lianjie = ""),
              (this.Content = ""),
              (this.Information = "");
            alert("提交成功");
          })
          .catch((error) => {
            console.error(error);
          });
      }
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.shenqingtitle {
  font-weight: 500;
  font-size: 60px;
  color: rgb(0, 0, 0);
  text-align: center;
}
.tips {
  margin: 45px 0px;
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
  color: rgb(0, 0, 0);
  text-align: center;
}
button {
  margin: 70px 38vw;
  width: 300px;
  height: 70px;
  background-color: yellow;
  font-weight: 400;
  font-size: 28px;
  border-radius: 10px;
  cursor: pointer;
}
.shenqingcontent {
  display: flex;
  width: 886px;
  margin: 0px auto 33px;
  -webkit-box-pack: end;
  justify-content: end;
  -webkit-box-align: center;
  align-items: center;
}
.classzhuti {
  display: flex;
  flex-direction: row;
  flex: initial;
  flex-wrap: initial;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
}
.typebutton {
  width: 256px;
  height: 68px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 5.58384px;
  font-weight: 400;
  font-size: 28px;
  line-height: 66px;
  color: rgb(0, 0, 0);
  cursor: pointer;
  margin-right: 30px;
  text-align: center;
}
.typelist {
  display: flex;
  margin-right: -30px;
}
.tip > span {
  position: absolute;
  color: rgb(251, 42, 42);
  display: block;
  top: 0px;
  right: -16px;
}
.tip {
  position: relative;
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
  color: rgb(0, 0, 0);
  margin-right: 40px;
}
.lianjie {
  margin: 1px 1px 1px 1px;
  padding: 18px;
  width: 541px;
  height: 68px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 5.58384px;
  font-size: 22px;
  color: rgb(0, 0, 0);
}
textarea {
  padding: 18px 4px 18px 18px;
  resize: none;
  width: 541px;
  height: 164px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 5.58384px;
  font-size: 22px;
}
.all {
  background: rgb(248, 248, 248);
  padding-top: 110px;
  padding-bottom: 89px;
  text-align: center;
}
.lianxi {
  padding: 18px;
  width: 541px;
  height: 68px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 5.58384px;
  font-size: 22px;
  color: rgb(0, 0, 0);
}
.email {
  font-weight: 400;
  font-size: 24px;
  line-height: 33px;
  color: rgb(176, 176, 176);
}
</style>